<template>
  <div class="app-container container-width">
    <img style="width: 100%" src="../../assets/image/bg/bg_car.png" />
    <div class="order-warp">
      <div class="checkBox-warp">
        <el-steps :active="step" simple>
          <el-step icon="iconfont icon-xuexi" >
              <template slot="title">
                  <p >手机验证</p>
              </template>
          </el-step>
          <el-step icon="iconfont icon-xuexi" title="设置个人信息"></el-step>
          <el-step icon="iconfont icon-xuexi" title="注册成功"></el-step>
        </el-steps>
        <div class="warp">
            <div>
            <loginBycode v-if="step===1" ref="checkPhone" loginType="checkPhone" refName="checkPhone"></loginBycode>
            <userInfo v-if="step===2" ref="account"  refName="account"></userInfo>
            <div v-if="step===3" class="success">
                <img style="width: 40%" src="../../assets/image/labels/success.png" />
                <p>用户名,欢迎加入</p>
            </div>
            <el-button round class="btn"  @click="next">{{stepBtn}}</el-button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginBycode from "./loginBycode.vue"
import userInfo from "./userInfo.vue"

export default {
    components: {
        loginBycode,
        userInfo
    },
    computed:{
        stepBtn:function(){
            return this.step < 3?'下一步':'去登录'
        }
    },
    data(){
        return {
          step:1
        }
    },
    methods:{

        next:async function(){
            switch(this.step){
                case 1:
                  await this.$refs.checkPhone.submit();
                   this.step++;
                   break;
                   case 2:
                 await  this.$refs.account.submit();
                   this.step++;
                   break;
                   case 3:return this.$router.push('/login')
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.order-warp {
  position: relative;
 
  z-index: 2;
  margin: -110px 40px 0;
}
.checkBox-warp {
    width: 80%;
  padding: 60px 100px ;
  margin: 20px auto;
  font-size: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(219, 124, 65, 0.1);
}
.input {
  height: 40px;
  line-height: 40px;
  display: block;
  border-radius: 20px;
  border: 1px solid #e6e6e6;
  color: #808080;
   padding:0 20px;
}
.input::placeholder,.input {
 
  font-size: 16px;
}
.warp{
    width:350px;
    margin:40px auto;
}
.btn{
    width: 100%;
    margin-top:20px;
    font-size:16px;
    color: #ffffff;
    background:#ff5f19
}
.success{
    text-align:center;
    }
</style>